<div class="modal-header">
    <h4 class="modal-title">Invite</h4>
</div>
<div class="modal-body">
    <!--{{'invite' | translate }}: <input type="text" name="folder" ng-model="folderName" />-->
    <h4 class="text-center" ng-if="!document.id && !isOwner">Invite Other Person to Join This Room</h4>
    <h4 class="text-center" ng-if="document.id">Invite Other Person to View This Document and Join This Room</h4>
    <p class="padding-l-r-40px" ng-if="document.id||!isOwner">A request will be sent to room owner. Only after the owner approves it, the invitee will be able to access this room</p>

    <h4 class="text-center" ng-if="isOwner && !document.id">Invite Other Person to Join This Room</h4>
    <p class="padding-l-r-40px" ng-if="isOwner && !document.id">An invitation email will be sent to the invitee. Please enter the invitee's email address.</p>

    <form class="form-horizontal" name="inviteForm" style="margin-bottom: 16px;" novalidate>
        <div class="form-group row">
            <label class="control-label col-sm-3" style="line-height: 34px;">Invitee Email: </label>
            <div class="col-sm-6 col-xs-10">
            <!--<input type="email" ng-model="newEmail"/>-->
                <input type="email" class="form-control" name="addemail" ng-model="newEmail" ng-pattern="emailPattern" placeholder="Enter email address">
            </div>
            <div class="col-sm-2 col-xs-2">
                <button class="btn btn-default btn-circle" ng-click="addNewEmail()"><i class="fa fa-plus"></i></button>
                <!--<i class="fa fa-plus-circle"></i>-->
            </div>
        </div>
        <ul class="list-unstyled">
            <li ng-repeat="email in emails">
                <div class="form-group">
                    <label class="control-label col-sm-3" for="email{{ email.id }}">Invitee Email:</label>
                    <div class="col-sm-6 col-xs-10">
                        <input type="email" class="form-control" name="email{{ email.id }}" id="email{{ email.id }}" ng-model="email.emailAddress" placeholder="Enter email address" required>
                    </div>
                    <!--{{ inviteForm['email'+ email.id].$dirty }}-->
                    <div class="col-sm-2 col-xs-2 font-12px-italy">
                        <button class="btn btn-default btn-circle" ng-click="delete($index)"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
            </li>
        </ul>
        <div class="form-group row" ng-if="document.id||!isOwner">
            <label class="control-label col-sm-3" for="message">Message to owner:</label>
            <div class="col-sm-6">
                <textarea name="message" id="message" ng-model="message" class="form-control" rows="5" placeholder="Introduce the invitee to the owner and tell the owner why he/she needs to enter this room or view this document"></textarea>
            </div>
        </div>
    </form>
</div>
<div class="modal-footer text-center" style="text-align: center">
    <!--{{inviteForm.$pristine}}-->
    <!--{{inviteForm.email.$dirty}}-->
    <!--<button type="button" class="btn btn-default" data-dismiss="modal">{{'cancel' | translate }}</button>-->
    <button class="btn btn-right-aside" ng-disabled="!isValid()" type="button" ng-click="ok()">
        {{ isOwner ? 'Send Invitation Email' : 'Send Request to Room Owner' }}
        <span class="spinner1" ng-if="sending">
            <span class="bounce1"></span>
            <span class="bounce2"></span>
            <span class="bounce3"></span>
        </span>
    </button>
    <button class="btn btn-default" type="button" ng-click="cancel()">cancel</button>
    <!--<button class="btn btn-default" ng-disabled="1==1">可以点击么</button>-->
</div>